<template>
    <div style="width: 100%" v-loading="loading">
        <div class="bookSearch">
            <el-form :inline="true" ref="form">

                <el-form-item label="手机号码" style="margin-left: 100px;">
                    <el-input v-model="mobile" placeholder="请输入手机号码"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handelSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>
        </div>
        <div class="bookTable">
            <el-table
                    :data="list"
                    border
                    style="width: 1501px">

                <el-table-column
                        align="center"
                        prop="user_nickname"
                        label="	用户昵称"
                        width="180">
                </el-table-column>

                <el-table-column
                        width="150px"
                        align="center"
                        prop="name"
                        label="联系人">
                </el-table-column>

                <el-table-column
                        width="150px"
                        align="center"
                        prop="mobile"
                        label="手机号码">
                </el-table-column>

                <el-table-column
                        width="100px"
                        align="center"
                        prop="sex"
                        label="性别">
                    <template slot-scope="scope">
                        {{scope.row.sex === 1 ? '男' : '女'}}
                    </template>
                </el-table-column>

                <el-table-column
                        width="130px"
                        align="center"
                        prop="people"
                        label="用餐人数">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="book_time"
                        label="用餐时间"
                        width="150">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="remark"
                        label="备注"
                        width="280">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="position_name"
                        label="位置"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleInfo(scope.row.id)"
                                type="primary"
                                size="mini">详细信息
                        </el-button>
                        <el-button
                                type="danger"
                                @click="handleDelete(scope.row.id)"
                                size="mini">删除
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>
        </div>

        <div class="bookPage">
            <el-pagination
                    v-if="bookPageVisible"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'bookOrder',
        data(){
            return{
                list: [],
                total: 0,
                loading: false,
                mobile: '',
                bookPageVisible: true
            }
        },
        methods:{
            defaultData(page,mobile){
                this.loading = true;
                this.$http.get('/store/book/list',{
                    params:{
                        token: localStorage.getItem('user_token'),
                        page: page,
                        mobile: mobile,
                        store_id: localStorage.getItem('user_store_id')
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                        if (this.total <= 10) {
                            this.bookPageVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                });
            },

            handelSearch(){
                this.defaultData(1,this.mobile);
            },

            handleReset(){
                this.mobile = '';
                this.defaultData();
            },

            handleDelete(id){
                this.loading = true;
                this.$confirm('是否删除该预定信息?', '删除预定信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/store/book/del',{
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch(error => {
                        console.log(error);
                        this.loading = false;
                    })

                });
            },

            handleInfo(id){
                this.$router.push({name: 'orderBookInfo', query: {id: id}})
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .bookTable{
        margin-left: 100px;
    }
    .bookSearch{
        height: 80px;
        width: 1360px;
        margin-left: 100px;
        margin-top: 40px;
    }
    .bookPage{
        margin-top: 24px;
        margin-left: 700px;
    }
</style>
